<template>
  <div class="my_box">
    <div class="items">
      <div class="label">{{$t('m.fēnpèishíjiān')}}</div>
      <DatePicker type="daterange" :value="TimeDefault" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" v-bind:placeholder="$t('m.fēnpèishíjiān')" class="ivu-input-w200"></DatePicker>
    </div>
    <br>
    <div style="margin-top:20px;">
      <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
      <Button class="parameter_button" type="primary" @click="queryParameter">{{$t('m.cháxún')}}</Button>
    </div>
    <div class="my_content">
      <Row class="my_tab_item">
        <div class="badge_box">
          <div id="badge-ribbon">No.{{baseInfo.currentAccountRanking}}</div>
        </div>
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.lěijìhuíkuǎnjīné')}} </p> <span class="Amount">{{currentType}} {{baseInfo.orderRemindCompltedAmount}}</span>
        </div>
        </Col>
        <Col class="item_Col item_Col_top" span="18">
        <div class="item_Col_box">
          <Row class="top_box">
            <Col class="top_item" span="8">
            <div class="top_item_box top_item_box_border">
              <p>{{$t('m.huíkuǎnjīnépáimíng')}}</p> <span>No.{{baseInfo.currentAccountRanking}}</span>
            </div>
            </Col>
            <Col class="top_item" span="8">
            <div class="top_item_box">
              <i class="title">{{$t('m.dàngyuèhuíkuǎnjīnédìyīmíng')}}</i><br>
              <i class="sort">{{ baseInfoOne.account}}</i><br>
              <i class="userName">{{ baseInfoOne.description}}</i><br>
            </div>
            </Col>
            <Col class="top_item" span="8">
            <div class="top_item_box">
              <span class="money">{{baseInfoOne.orderRemindCompltedAmount}}</span>
            </div>
            </Col>
          </Row>
        </div>
        </Col>
      </Row>
      <Row class="my_tab_item">
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.lěijìwèibèizhùdìngdān')}} ({{$t('m.gè')}})</p> <span>{{baseInfo.toBeRemindOrderTotalNum}}</span>
        </div>
        </Col>
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.lěijìyǐbèizhùdìngdān')}} ({{$t('m.gè')}})</p> <span>{{ baseInfo.orderRemindedTotalNum}}</span>
        </div>
        </Col>
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.lěijìquánbùcuīhuídìngdān')}} ({{$t('m.gè')}})</p> <span>{{baseInfo.orderRemindCompltedTotalNum}}</span>
        </div>
        </Col>
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.lěijìbùfèncuīhuídìngdān')}} ({{$t('m.gè')}})</p> <span>{{baseInfo.partialOrderRemindTotalNum}}</span>
        </div>
        </Col>
      </Row>
      <Table border :columns="qualityTable" :data="myList" class="quality_box"></Table>
    </div>
  </div>
</template>

<script>
import { formatTreeMount } from "@/libs/util";
export default {

  name: 'MyWorkbench',
  data () {
    return {
      currentType:'',
      myList: [],
      assignedDateBegin: "",
      assignedDateEnd: "",
      baseInfo: {},
      baseInfoOne: [],
      TimeDefault: [],
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      qualityTable: [
        {
          title: this.$t('m.dayTime'),
          width: 200,
          align: 'center',
          key: 'remindDate',
          fixed: 'left',
        },
        {
          title: this.$t('m.shàngqíliúcúncuīshōushùliàng'),
          width: 200,
          align: 'center',
          key: 'lastRemindNum'
        },
        {
          title: this.$t('m.shàngcìliúcúncuīshōudìngdānjīné'),
          width: 200,
          align: 'center',
          key: 'lastRemindUndoneAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.lastRemindUndoneAmount));
          }
        },
        {
          title: this.$t('m.xīnzēngànjiàndàicuījīné'),
          width: 200,
          align: 'center',
          key: 'newRemindUndoneAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.newRemindUndoneAmount));
          }
        },
        {
          title: this.$t('m.chénggōngànjiànshù'),
          width: 200,
          align: 'center',
          key: 'completeRemindNum'
        },
        {
          title: this.$t('m.chénggōngànjiànhuíkuǎnjīné'),
          width: 200,
          align: 'center',
          key: 'remindAmountTobeCompleted',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.remindAmountTobeCompleted));
          }
        },
        {
          title: this.$t('m.shíjìhuíkuǎnjīné'),
          width: 200,
          align: 'center',
          key: 'actualCompletedRemindAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.actualCompletedRemindAmount));
          }
        },
        {
          title: this.$t('m.zhòngfēnpèiànjiànshù'),
          width: 200,
          align: 'center',
          key: 'reallocateRemindNum',
          // render: (h, param) => {
          //   return h("div", formatTreeMount(param.row.payAmount));
          // }
        },
        {
          title: this.$t('m.zhòngfēnpèiànjiàndàicuījīné'),
          width: 200,
          align: 'center',
          key: 'reallocateRemindUndoneAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.reallocateRemindUndoneAmount));
          }
        },
        {
          title: this.$t('m.shībàiànjiànshù'),
          width: 200,
          align: 'center',
          key: 'failedRemindNum'
        },
        {
          title: this.$t('m.shībàiànjiàndàicuījīné'),
          width: 200,
          align: 'center',
          key: 'failedRemindUndoneAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.failedRemindUndoneAmount));
          }
        },
        {
          title: this.$t('m.shíjiānduànnèixūchǔlǐànjiànzǒngshù'),
          width: 200,
          align: 'center',
          key: 'remindTotalNum'
        },
        {
          title: this.$t('m.shíjiānduànnèixūchǔlǐànjiàndàicuījīné'),
          width: 200,
          align: 'center',
          key: 'remindTotalNumUndoneAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.remindTotalNumUndoneAmount));
          }
        },
        {
          title: this.$t('m.shèngyúdàichǔlǐànjiànshù'),
          width: 200,
          align: 'center',
          key: 'pendingRemindNum'
        },
        {
          title: this.$t('m.shèngyúdàichǔlǐànjiàndàicuījīné'),
          width: 200,
          align: 'center',
          key: 'pendingRemindUndoneAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.pendingRemindUndoneAmount));
          }
        },
        {
          title: this.$t('m.dìngdāncuīhuíchénggōnglǜ'),
          width: 200,
          align: 'center',
          key: 'completeRemindRate',
          render: (h, param) => {
            return h("div", param.row.completeRemindRate + '%');
          }
        },
        {
          title: this.$t('m.dìngdāncuīhuíshībàilǜ'),
          width: 200,
          align: 'center',
          key: 'failedRemindRate',
          render: (h, param) => {
            return h("div", param.row.failedRemindRate + '%');
          }
        },
        {
          title: this.$t('m.zījīncuīhuíchénggōnglǜ'),
          width: 200,
          align: 'center',
          key: 'amountPushBackRate',
          render: (h, param) => {
            return h("div", param.row.amountPushBackRate + '%');
          }
        }
      ],

    }
  },
  components: {
  },
  props: {},
  watch: {},
  methods: {

    queryDateEvent () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
      let r = d.getDate().toString().padStart(2, '0'); // 日子
      let h = d.getHours().toString().padStart(2, '0'); // 小时 
      let mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
      let ss = d.getSeconds().toString().padStart(2, '0'); // 秒
      this.assignedDateBegin = `${y}-${m}-${r}`; // es6 字符串模板
      this.assignedDateEnd = `${y}-${m}-${r}`;
      this.TimeDefault = [`${y}-${m}-${r}`, `${y}-${m}-${r}`]
    },
    emptyQueryInfo () {
      this.queryDateEvent()
      this.queryInfo()
    },
    timeChange (e) {
      if (typeof (e) == "undefined") {
        this.assignedDateBegin = e[0];
      } else if (typeof (e) == "object") {
        this.assignedDateBegin = e[0];
        this.assignedDateEnd = e[1];
      }
    },
    queryParameter () {
      this.queryInfo()
      this.queryList()
    },
    queryInfo () {
      let param = {},
        query = '';
      param.beginTimeAssign = this.assignedDateBegin
      param.endTimeAssign = this.assignedDateEnd
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/remind/workBench/basic?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.baseInfo = res.body.result
          this.baseInfoOne = res.body.result.thisMonthNumberOneInfo == null ? {} : res.body.result.thisMonthNumberOneInfo
        } else {
          this.baseInfo = {}
          this.baseInfoOne = {}
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));

      });

    },
    queryList () {
      let param = {},
        query = '';
      param.beginTimeAssign = this.assignedDateBegin
      param.endTimeAssign = this.assignedDateEnd
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/remind/workBench/statis?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.myList = res.body.result
        } else {
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));

      });

    },

  },
  filters: {},
  computed: {},
  created () { },
  mounted () {    
    this.currentType = localStorage.getItem("x-currentType")
    this.queryDateEvent()
    this.queryInfo()
    this.queryList()
  },
  destroyed () { }

}
</script>

<style  lang="scss">
@import "../static/style.css";
@import "../static/common.scss";
.my_box {
  padding: 15px;
  .parameter_box {
    width: 200px;
    margin-right: 50px;
    margin-left: 5px;
  }
  .my_content {
    // background: red;
    margin-top: 30px;
    .my_tab_item {
      margin: 0 -12px;
      // background: red;
      .item_Col {
        // background: #fff;
        text-align: center;
        .item_Col_box {
          height: 160px;
          margin: 12px;
          padding: 19px 30px;

          background: #f0f2f5;
          p {
            text-align: left;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
          }
          span {
            font-size: 45px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(34, 34, 34, 1);
          }
          .Amount {
            margin-top: 30px;
            font-size: 30px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(34, 34, 34, 1);
          }
          .item_Col_box_color_White {
            color: rgba(255, 255, 255, 1);
          }
          .item_Col_box_circle_title {
            font-size: 18px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(255, 255, 255, 1);
          }

          .item_Col_box_circle_title_two {
            font-size: 18px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: #222222;
          }
          .top_box {
            .top_item {
              .top_item_box {
                .title {
                  font-size: 16px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: rgba(34, 34, 34, 1);
                  line-height: 24px;
                  padding-bottom: 20px;
                  display: inline-block;
                }
                .sort {
                  font-size: 22px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: rgba(153, 153, 153, 1);
                  line-height: 30px;
                  padding-bottom: 10px;
                  display: inline-block;
                }
                .userName {
                  font-size: 22px;
                  font-family: PingFang-SC-Bold, PingFang-SC;
                  font-weight: bold;
                  color: rgba(34, 34, 34, 1);
                  line-height: 30px;
                }
                .money {
                  height: 97px;
                  line-height: 97px;
                  font-size: 30px;
                  font-family: PingFang-SC-Heavy, PingFang-SC;
                  font-weight: 800;
                  color: rgba(34, 34, 34, 1);
                }
              }
              .top_item_box_border {
                border-right: 2px solid #fff;
                height: 114px;
              }
            }
          }
        }
        .ApprovalBy {
          background: linear-gradient(
            90deg,
            rgba(45, 140, 240, 1) 0%,
            rgba(18, 91, 212, 1) 100%
          );
          border-radius: 5px;
        }
        .ApprovalRefuse {
          background: linear-gradient(
            90deg,
            rgba(225, 112, 112, 1) 0%,
            rgba(197, 73, 73, 1) 100%
          );
          border-radius: 5px;
        }
        .ApprovalPending {
          background: linear-gradient(
            90deg,
            rgba(232, 185, 33, 1) 0%,
            rgba(230, 124, 29, 1) 100%
          );
          border-radius: 5px;
        }
      }
    }
    .badge_box {
      z-index: 11;
      position: absolute;
      right: 10px;
      top: -20px;
      text-align: center;
      #badge-ribbon {
        position: relative;
        background: linear-gradient(
          180deg,
          rgba(255, 189, 12, 1) 0%,
          rgba(246, 142, 14, 1) 100%
        );
        height: 45px;
        width: 45px;
        border-radius: 50px;
        font-size: 13px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: rgba(255, 255, 255, 1);
        line-height: 40px;
      }
      #badge-ribbon:before,
      #badge-ribbon:after {
        content: "";
        position: absolute;
        border-bottom: 30px solid rgba(246, 142, 14, 1);
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        top: 39px;
        left: -10px;
        transform: rotate(-140deg);
      }
      #badge-ribbon:after {
        left: auto;
        right: -10px;
        transform: rotate(140deg);
      }
    }
    .quality_box {
      margin: 0 12px;
      margin-top: 30px;
    }
    .schedule_box {
      margin: 0 12px;
      margin-top: 30px;
    }
  }
}
.items {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>